<template>
  <div class="container" ref="top">
    <navbar title="限时免单" theme="primary"></navbar>
    <wxc-tab-page ref="wxc-tab-page"
                  :tab-titles="seasonList"
                  :titleUseSlot="true"
                  :tab-styles="tabStyles"
                  :tab-page-height="tabPageHeight"
                  @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
      <div :class="['season-list-nav', season.active && 'season-list-nav-active']" :ref="'season' + season.time"
           :slot="'tab-title-' + idx"
           v-bind:key="season.time"
           v-for="(season, idx) in seasonList">
        <text :class="['season-list-nav-title', season.active && 'season-list-nav-active-title']">{{season.title}}</text>
        <text :class="['season-list-nav-help', season.active && 'season-list-nav-active-help']">{{season.remainSeconds >= 0 ? '即将开始' : '已开抢'}}</text>
      </div>
      <flash-sale-item-list v-for="(season) in seasonList" v-bind:key="season.time"
                            :active="season.active" :season="season.time" :date="season.date" :height="tabPageHeight - 130"></flash-sale-item-list>
    </wxc-tab-page>
    <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  .container{
    background-color: $body-bg;
    transition: transform .3s linear
  }

  .season-list {
    background-color: $brand-primary;
    height: 130px;
    flex-direction: row;
    &-nav {
      height: 110px;
      line-height: 110px;
      padding:0 20px;
      margin: 0 10px;
      align-items: center;
      justify-content: center;
      &-active {
        background-color: #ffffff;
        color: $color-primary;
        border-radius: 10px;
        &-title{
          color: $color-primary;
        }
        &-help {
          color: $color-primary;
        }
      }
      &-title {
        font-size: 50px;
        color: #ffffff;
        font-weight: 300;
      }
      &-help {
        font-size: 24px;
        color: #ffffff;
      }
    }
  }

</style>
<script>

import { WxcTabPage, WxcPanItem, Utils } from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let theme = require('./include/theme')
require('./include/page-xdom')
let modal = weex.requireModule('modal')
module.exports = {
  mixins: [
    require('./mixin/page-refresh'),
    require('./mixin/page-loading-more'),
    require('./mixin/page-scrolltop')
  ],
  components: {
    'page-notice': require('./components/page-notice.vue'),
    navbar: require('./components/navbar.vue'),
    WxcTabPage,
    WxcPanItem,
    'flash-sale-item-list': require('./components/flash-sale-item-list.vue')
  },
  data () {
    return {
      seasonList: [],
      searchSearchContextMap: {},
      tabStyles: {
        bgColor: theme.color.primary,
        width: 200,
        height: 130,
        fontSize: 30,
        hasActiveBottom: true,
        activeBottomColor: theme.color.primary,
        activeBottomHeight: 2,
        activeBottomWidth: 150,
        textPaddingLeft: 10,
        textPaddingRight: 10,
        textPaddingBottom: 10
      },
      tabPageHeight: 1334
    }
  },
  created () {
    this.tabPageHeight = Utils.env.getPageHeight()
    Deferred.when(this.loadData()).always(() => {

    })
  },
  methods: {
    loadData () {
      return api.page.flashSale.data().done(rs => {
        let data = rs.data
        this.seasonList = data.seasonList
        // this.$refs['wxc-tab-page'].setPage(4)
        this.seasonList.forEach((s, idx) => {
          if (s.active) {
            setTimeout(() => {
              this.$refs['wxc-tab-page'].setPage(idx)
            }, 100)
          }
        })
      })
    },
    wxcTabPageCurrentTabSelected (e) {
      const index = e.page
      this.seasonList.forEach((s, idx) => {
        s.active = index === idx
      })
    },
    gotoTop () {
      let dom = weex.requireModule('dom')
      dom.scrollToElement(this.$refs.top)
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    selectSeason (season) {
      this.seasonList.forEach(s => { s.active = false })
      season.active = true
    }
  }
}
</script>
